<template>
	<view >
		<image src="/static/home.png" mode="widthFix" class="image posiab"></image>
		<view :style="{paddingTop:shh+'px'}"></view>
		<view class="con posire zindex5  ">
			<view class="flex-ju-b pt40">
				<image src="/static/hbox.png" mode="widthFix" class="image width64"></image>
				<input v-model="key" @confirm="coninput" confirm-type="search" class="flex1 border000 pg10 ml50 mr20 ra40 center" />
				<image @click="coninput" src="/static/sou.png" mode="widthFix" class="image width45"></image>
			</view>

			<view class="mt40">
				<view 
					class="ra15 border999 flex-ju-b bold size26 pg5 bg3C3C3C color999">
					<view @click="tabim(0)" :class="{active:tindex==0}" class="wh330-75  ra15 flex-ju-c">数字藏品</view>
					<view @click="tabim(1)" :class="{active:tindex==1}" class="wh330-75  ra15 flex-ju-c">潮流盲盒</view>
				</view>
			</view>

			<view class="flex-ju-b size30 mt40">
				<scroll-view scroll-x >
					<view class="flex-a-i">
						<view @click="tabindex(item,p)" :style="{color:categoriesIndex==p?'#000':'#999'}"
							:class="{tactive:categoriesIndex==p}" class="nomore mr80 center"
							v-for="(item,p) in categories" :key="p">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
			</view>

			<view v-if="isdata" class="flex-ju-c mt8vh">
				<view class="flex-ju-c flex-col">
					<image mode="widthFix" class="width210 ra20" src="/static/nodata.png"></image>
					<view class=" size24">这里什么也没有~</view>
				</view>
			</view>
			<view class="flex-ju-b flex-wrap pb30 ">

				<view @click="navto('detail?info='+JSON.stringify(item))" v-for="(item,p) in list" :key="p"
					:class="theme?'bg292929 colorfff':'bgfff'" class="posire borderE1E1E1 mt30 ra20">

					<image mode="widthFix" class="posiab width120 bottom-10 right0 zindex515"
						src="/static/diwenlogin.png"></image>
					<view class="posire">

						<image class="image wh330-330 ra20" :src="item.thumb"></image>
						<view v-if="item.on_sell==0" class="flex-ju-c posiab wh330-330 top0" style="background:rgba(0,0,0,0.5);">
							<image mode="widthFix" class="image width234  bottom15" src="/static/tuishi.png">
							</image>
						</view>
					</view>
					<view class="width310 " style="margin: auto;margin-bottom: 20rpx;">
						<view class=" one bold size32  mt15">{{item.title}}</view>
						<view class="flex mt5 mb5">
							<view class="flex-a-i size24 borderccc ra10 hidden">
								<view class="bg000 colorFFf pt5 pb5 pl10 pr10">限量</view>
								<view class="pr10 pl10 size28">{{item.sell_num}}份</view>
							</view>
						</view>
						<view class="size24">流通{{item.release_num}}份</view>
						<view class="flex-row  flex">
							<view class="mt10">
								<text class="size20 bold">¥</text>
								<text class="size35 bold">{{item.min_price>0?(item.min_price/100).toFixed(2):'--'}}</text>
								<text class="size20 color999 ">起</text>
							</view>
						</view>
						
					</view>
				</view>

			</view>


		</view>
	</view>

	 
</template>

<script>
	export default {
		data() {
			return {
				tindex: 0,
				categories:[],
				categoriesIndex: 0,
				categoriesList: {
					my: [],
					list: []
				},
				tcategories:[],
				list: [],
				page: 1,
				key: "",
				isdata: false,
				theme: '',
				isbox: 0
			}
		},
		onShow() {
			this.theme = uni.getStorageSync('theme')
		},
		
		mounted() {
			// this.$refs.showRight.open();
			if (uni.getStorageSync('theme')) {
				uni.setTabBarStyle({
					backgroundColor: "#292929",
					color: "#A19996",
					selectedColor: "#FFFFFF"
				})
			} else {
				uni.setTabBarStyle({
					backgroundColor: "#ffffff",
					color: "#A19996",
					selectedColor: "#000000"
				})
			}
		},
		onPullDownRefresh(){
			// this.getcete()
			this.getList()
		},
		onLoad() {
			this.getcete()
			// this.http('market/categories_new').then(res => {
			// 	this.categories = res.data.my
			// })
			
			if (this.theme) {
				uni.setTabBarStyle({
					backgroundColor: "#292929",
					color: "#A19996",
					selectedColor: "#FFFFFF"
				})
			} else {
				uni.setTabBarStyle({
					backgroundColor: "#ffffff",
					color: "#A19996",
					selectedColor: "#000000"
				})
			}
		},
		onReachBottom() {
			// this.page++
			// this.getList()
		},
		methods: {
			conint(){
				this.getList()
			},
			getcete(){
				this.tindex = 0
				this.isbox=0
				this.categoriesIndex=0
				this.http('market/categories').then(res => {
					
					res.data.unshift({
						id:-1,
						title:"推荐"
					})
					this.categoriesList = res.data
					this.categories = res.data
					
					// this.categoriesList = JSON.parse(JSON.stringify(res.data))
					// this.categories = JSON.parse(JSON.stringify(res.data))
					this.getList()	
					// this.$refs.showRight.close();
				})
			},
			tapcetetrue() {
				
				var arr = []
				this.categoriesList.map(item=>{
					arr.push(item.id)
				})
				this.http('market/mycategories', {
					ids:arr
				},'post').then(res=>{
					this.getcete()
				})
				
			},
			addcete(item, index) {
				this.categoriesList.push(item)
				this.categoriesList.list.splice(index, 1)
			},
			cetejian(item, index) {
				if(this.categoriesList.length ==1){
					uni.showToast({
						title:"最少保留一个",
						icon:"none"
					})
					return
				}
				
				
				this.categoriesList.list.push(item)
				this.categoriesList.splice(index, 1)
			},
			
			
			bulr() {
				this.page = 1
				this.list = []
				this.getList()
			},
			getList(is_box) {
				this.http('market/goods', {
					page: 1,
					per_page: 200,
					is_box: this.isbox,
					categorie_id: this.categoriesList[this.categoriesIndex].id,
					key: this.key
				}).then(res => {
					
					this.list =res.data.list
					if (this.list.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
					uni.stopPullDownRefresh()
				})
			},
			tabindex(item, index) {
				this.categoriesIndex = index
				this.list = []
				this.page = 1
				this.getList()
			},
			tabim(index) {
				this.tindex = index
				this.list = []
				this.isbox = index
				this.getList(index)
			}
		}
	}
</script>

<style>
	
	.border292929 {
		border: 1px solid #292929;
	}

	.line {
		margin: auto;
		width: 47rpx;
		height: 7rpx;
	}

	.sactive {
		background: linear-gradient(0deg, #FF6E44, #FFA453, #FFDC7F);
	}

	.tactive {
		font-weight: bold;
	}

	

	.nomore {
		white-space: nowrap;
	}

	.active {
		background: #000;
		color:#BBFF8C;
	}
</style>